<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
	  <meta http-equiv="cache-control" content="no-cache">
	  <meta http-equiv="expires" content="0">    
	  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	  <meta http-equiv="description" content="This is my page">
   
    <script src="/js/vue.min.js"></script>
    <script src="/js/httpVueLoader.js"></script><!-- 引入 http-vue-loader -->   
    <script type="text/javascript" src="/js/axios.min.js"></script>

    <link href="/css/front.css" rel="stylesheet">

    <style rel="stylesheet" type="text/css">
      .c1-bline{border-bottom:#999 1px dashed;border-top:1px;} 
      .f-right{float:right}
      .f-left{float:left}
      .clear{clear:both}
	  </style>
    
</head>

<body>
<div id="app">
<my-header></my-header> 


<article> 
  <!--左侧-->
  <div class="lbox"> 
    
    
    <!-- 444 -->
    <div class="zhuanti whitebg" style="margin-top: 12px;">
      <!-- <h2 class="htitle"><span class="hnav"></span>新闻动态</h2> -->
      <div>
          <form action="" name="form1" method="post">
	                                  <table width="100%"  border="0" cellpadding="8" cellspacing="1" bgcolor="#CBD8AC">
                                        <tr bgcolor="#FFFFFF" style="height: 43px;">
                                            <td width="88" bgcolor="#FFFFFF" align="right">
                                                                                                                                                            捐助金额：
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                                <input type="text" v-model="juan.jine" style="width: 288px;" 
                                                  onkeyup="value=value.replace(/[^\d]/g,'') "
                                                  onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/>
                                            </td>
                                        </tr>
                                        <tr bgcolor="#FFFFFF" style="height: 43px;">
                                            <td width="88" bgcolor="#FFFFFF" align="right">
                                                                                                                                                           
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                                <table>
                                                    <tr>
                                                        <td>
                                                             <img src="/img/weixin.jpg" @click="weixin()" style="cursor:pointer">
                                                        </td>
                                                         <td>
                                                             <img src="/img/zhifubao.jpg" @click="zhifubao()" style="cursor:pointer">
                                                        </td>
                                                    </tr>
                                                </table>
                                                <span style="color: red;">点击二维码完成支付</span>
                                            </td>
                                        </tr>
                                        <tr bgcolor="#FFFFFF" style="height: 43px;">
                                            <td width="88" bgcolor="#FFFFFF" align="right">
                                                                                                                                                              付款状态：
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                                <input name="fkzt" id="fkzt" value="待支付" v-model="juan.fkzt" style="width: 200px;" readonly="readonly">(只读)
							                                  <input name="fkfs" id="fkfs" value="" v-model="juan.fkfs" style="width: 200px;" readonly="readonly">
                                            </td>
                                        </tr>

                                        <tr bgcolor="#FFFFFF" style="height: 43px;">
                                            <td width="88" bgcolor="#FFFFFF" align="right">
                                                                                                                                                                捐助时间：
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                                <input type="text" v-model="juan.shijian" style="width: 188px;" readonly/>
                                            </td>
                                        </tr>
                                        
                                        <tr bgcolor="#FFFFFF" height="30">
                                            <td width="88" bgcolor="#FFFFFF" align="right">
                                                &nbsp;
                                            </td>
                                            <td bgcolor="#FFFFFF" align="left">
                                            &nbsp;<input type="button" value="提交" @click="juanAdd()" style="width: 70px;"/>&nbsp; 
                                            </td>
                                        </tr>
                                     </table>   
                                  </form> 
      </div>
    </div>
    <!-- 444 -->
    
    
    
    
    
    
    
    
    
  </div>
  <!--左侧-->
  
  
  
  
  
  
  
  
  <!--右侧-->
  <div class="rbox">
      <my-right></my-right>
  </div>
  <!--右侧-->
  
  
</article>



<my-foot></my-foot>



    
</div>


<script>
    new Vue({
        el: '#app',
        data: 
        {
            juan:{
              id:0,
              user_id:0,
              jine: 100,
              fkzt:"待支付",

              fkfs:"",
              shijian:"",
            },

            
		    },
        
        methods: 
        {

            weixin()
            {
                if(this.juan.fkzt=="已支付")
                {
                    alert("您已经支付过了");
                    return false
                }
                this.juan.fkzt="已支付";	
                this.juan.fkfs="微信";	
            },

            zhifubao()
            {
                if(this.juan.fkzt=="已支付")
                {
                    alert("您已经支付过了");
                    return false
                }
                this.juan.fkzt="已支付";	
                this.juan.fkfs="微信";	
            },

          juanAdd()
          {
              var userJsonString = localStorage.getItem("user");
              if(userJsonString ==null)//判断是否登录
              {
                alert("请先登录");
                return false;
              }
              
              if(this.juan.fkzt=="待支付")
              {
                alert("请扫码支付");
                return;
              }
                    
              this.add();
          },

          add()
          {
            axios({
                method: 'POST',
                url: '/juanAdd',
                data: this.juan,
                /* params:{
                  username:this.juan.userName,
                  password:this.juan.userPw,
                } */
                }).then(data => {
                  if (data.data.state == 66)
                  {
                    alert("捐款成功");
                    window.location.reload();
                  } 
                    
                  
                }).catch(error => {
                  alert(error);
                })
          },
                
                /* 获取系统时间 */
          padLeftZero (str)
          {
          return ('00' + str).substr(str.length);
          },

          formateDate(date, fmt)
          {
          if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
          }
          let o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds()
          }
          for (let k in o) {
          if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
          }
          }
          return fmt;
          },
          /* 获取系统时间 */


        },
        
        created()
        {
                this.juan.shijian=this.formateDate(new Date(), 'yyyy-MM-dd hh:mm');

                var userJsonString = localStorage.getItem("user");
                if(userJsonString !=null)//判断是否登录
                {
                    var user=JSON.parse(userJsonString);
                    this.juan.user_id=user.uid;
                }
        },

        components: {
            'my-header': httpVueLoader('/components/my-header.vue'),
            'my-foot': httpVueLoader('/components/my-foot.vue'),
            'my-right': httpVueLoader('/components/my-right.vue'),
        },


    })
</script>
</body>

</html>